﻿@model QuanLyGiaoVuUI.Models.ThongBao.ThongBaoViewModel

@{
    Layout = null;
}
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<style>
    #NguoiNhan {
        width: 500px;
        height: auto;
        min-height: 20px;
        background-color: #fff;
        cursor: text;
        border-color: #B3B3B3 #EAEAEA #EAEAEA #B3B3B3;
        border-style: solid;
        border-width: 1px;
        padding: 4px 4px 5px;
    }
        #NguoiNhan p {
            line-height: 20px;
            font-size: 100%;
        }

    .hiddenObject {
        display: none;
    }

    .tailieuHolder {
        margin-top: 5px;
    }

        .taiLieuHolder input {
            margin: 5px;
        }
</style>

<div id="page-heading">
    <div class="block">
 @{Html.EnableClientValidation();}
 @{using (Ajax.BeginForm("GuiThongBao", "ThongBao", new AjaxOptions { HttpMethod = "POST", OnSuccess = "SendSuccess" }, new { id = "GuiThongBaoForm"}))
   {
        @Html.ValidationSummary()
            <input type="hidden" value="" id="thutugiangvien" />
            <table class="form" style="width: 100%">
                <tr>
                    <td>
                        <div class="editor-label">
                            @Html.LabelFor(m => m.NguoiNhanIDs)
                        </div>
                    </td>
                    <td>
                        <div class="editor-field">
                            @Html.HiddenFor(m => m.NguoiNhanIDs)
                            @*<input type="text" value="" id="NguoiNhan" class="large" />*@
                            <div id="NguoiNhan">
                                <p></p>
                            </div>
                            @Html.ValidationMessageFor(m => m.NguoiNhanIDs)
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="editor-label">
                            @Html.LabelFor(m => m.TieuDeThongBao)
                        </div>
                    </td>
                    <td>
                        <div class="editor-field">
                            @Html.TextBoxFor(m => m.TieuDeThongBao, new { @class = "large" })
                            @Html.ValidationMessageFor(m => m.TieuDeThongBao)
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="editor-label">
                            <label>Hình thức gửi:</label>
                        </div>
                    </td>
                    <td>
                        <div class="editofr-field">
                            <div>
                                <input type="checkbox" name="GuiHeThong" checked="checked" disabled="disabled" value="" />
                                <label>Gửi qua tin nhắn của hệ thống</label>
                            </div>
                            
                            <div>
                                @Html.CheckBoxFor(m => m.GuiQuaEmail)
                                @Html.LabelFor(m => m.GuiQuaEmail)
                            </div>

                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="editor-label">
                            @Html.LabelFor(m => m.NoiDungThongBao)
                        </div>
                    </td>
                    <td>
                        <div class="editor-field">
                            @Html.TextAreaFor(m => m.NoiDungThongBao, 10, 50, new { @class = "large", style="width: 500px" })
                            @Html.ValidationMessageFor(m => m.NoiDungThongBao)
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="editor-label">
                            <label>Tài liệu đính kèm</label>
                        </div>
                    </td>
                    <td>
                        <div class="editor-field">
                            <div class="taiLieuHolder"><input type="hidden" value="" id="MaTaiLieu1" name="MaTaiLieu1" class="MaTaiLieu" /><a href="javascript:;" id="TenTaiLieu1"></a><input type="button" id="btn1" value="Chọn" class="btnChonTaiLieu"/><input type="button" id="XoaTaiLieu1" value="Xóa" class="btnXoa hiddenObject" /></div>
                            <div class="taiLieuHolder"><input type="hidden" value="" id="MaTaiLieu2" name="MaTaiLieu2" class="MaTaiLieu" /><a href="javascript:;" id="TenTaiLieu2"></a><input type="button" id="btn2" value="Chọn" class="btnChonTaiLieu"/><input type="button" id="XoaTaiLieu2" value="Xóa" class="btnXoa hiddenObject" /></div>
                            <div class="taiLieuHolder"><input type="hidden" value="" id="MaTaiLieu3" name="MaTaiLieu3" class="MaTaiLieu" /><a href="javascript:;" id="TenTaiLieu3"></a><input type="button" id="btn3" value="Chọn" class="btnChonTaiLieu"/><input type="button" id="XoaTaiLieu3" value="Xóa" class="btnXoa hiddenObject" /></div>
                            <div class="taiLieuHolder"><input type="hidden" value="" id="MaTaiLieu4" name="MaTaiLieu4" class="MaTaiLieu" /><a href="javascript:;" id="TenTaiLieu4"></a><input type="button" id="btn4" value="Chọn" class="btnChonTaiLieu"/><input type="button" id="XoaTaiLieu4" value="Xóa" class="btnXoa hiddenObject" /></div>
                            <div class="taiLieuHolder"><input type="hidden" value="" id="MaTaiLieu5" name="MaTaiLieu5" class="MaTaiLieu" /><a href="javascript:;" id="TenTaiLieu5"></a><input type="button" id="btn5" value="Chọn" class="btnChonTaiLieu"/><input type="button" id="XoaTaiLieu5" value="Xóa" class="btnXoa hiddenObject" /></div>
                        </div>
                    </td>
                </tr>
            </table>
            <p>
                <input id="guiThongBao-submit" style="display: none" type="submit" value="Lưu" />
            </p>
   }
        }
    </div>
</div>
<div id="ChonNguoiNhanDialog"></div>
<div id="ChonTaiLieuDialog"></div>

<script>
    $(document).ready(function () {
        $("input[type=button]").button();
        KiemTraButton();

        $("#ChonNguoiNhanDialog").load("/ThongBao/ChonNguoiNhan").dialog({
            autoOpen: false,
            title: "Chọn người nhận",
            width: 800,
            height: "auto",
            buttons: {
                "Xong": function () {
                    var danhSachGiangVienId = ChonNguoiNhanObject.LayDanhSachGiangVienId();
                    var danhSachThongTinGiangVien = ChonNguoiNhanObject.LayDanhSachThongTinGiangVien();
                    ChonNguoiNhan(ChonNguoiNhanObject.LayDanhSachGiangVienId(), ChonNguoiNhanObject.LayDanhSachThongTinGiangVien());
                    $("#ChonNguoiNhanDialog").dialog("close");
                }
            }
        });

        $(".btnChonTaiLieu").each(function () {
            $(this).bind("click", function () {
                var thuTuTaiLieu = $(this).attr("id").substr(3,1);
                $("#ChonTaiLieuDialog").load("/TaiLieu/ChonTaiLieuDialog").dialog({
                    autoOpen: true,
                    width: 700,
                    height: 400,
                    title: "Chọn tài liệu",
                    buttons: {
                        "Chọn": function () {
                            if (ChonTaiLieuDialog.MaTaiLieu != null)
                            {
                                $("#MaTaiLieu" + thuTuTaiLieu).val(ChonTaiLieuDialog.MaTaiLieu);
                                $("#TenTaiLieu" + thuTuTaiLieu).html(ChonTaiLieuDialog.TenTaiLieu);
                                $("#XoaTaiLieu" + thuTuTaiLieu).removeClass("hiddenObject");

                                if (thuTuTaiLieu < 5) {
                                    $("#MaTaiLieu" + thuTuTaiLieu).parent().next().removeClass("hiddenObject");
                                }
                            }
                            $("#ChonTaiLieuDialog").dialog("close");
                        }
                    }
                });
            });
        });

        $(".btnXoa").each(function () {
            $(this).bind("click", function () {
                var thuTuTaiLieu = $(this).attr("id").substr(10, 1);
                $("#MaTaiLieu" + thuTuTaiLieu).val('');
                $("#TenTaiLieu" + thuTuTaiLieu).html('');
                $("#XoaTaiLieu" + thuTuTaiLieu).addClass("hiddenObject");
                KiemTraButton();
            });
        });

        $("#NguoiNhan").click(function () {
            ThongBaoObject.ChonNguoiNhan();
        });
    });

    function SendSuccess(data) {
        if (data.success) {
            $("#ThongBaoMoiDialog").dialog("close");
            ToastManager.showSuccessToast("Gửi thông báo thành công.");
        }
        else
            ToastManager.showStickyWarningToast(data.message);
    }

    var TaoThongBao = new function () {
        this.ChonNguoiNhan = function (nguoiNhanId, nguoiNhanName, nguoiNhanEmail) {
            $("#NguoiNhanID").val(nguoiNhanId);
            $("#NguoiNhan").val(nguoiNhanName + "(" + nguoiNhanEmail + ")");
        }

        this.GuiThongBao = function () {
            $("#guiThongBao-submit").trigger("click");
        }
    }

    function ChonNguoiNhan(danhSachGiangVienId, danhSachThongTinGiangVien) {
        $("#NguoiNhanIDs").val(danhSachGiangVienId);
        $("#NguoiNhan").find("p").html(danhSachThongTinGiangVien);
    }

    function KiemTraButton()
    {
        $(".taiLieuHolder").each(function () {
            var hideThis = false;
            var btnXoa = $(this).find(".btnXoa").first();
            var thuTuHienTai = btnXoa.attr("id").substr(10, 1);
            if ($("#MaTaiLieu" + thuTuHienTai).val().length == 0) {
                var prevObj = $(this).prev();
                if (prevObj != null && prevObj.length > 0) {
                    var btnXoa = prevObj.find(".btnXoa").first();
                    var thuTuTaiLieu = btnXoa.attr("id").substr(10, 1);
                    if ($("#MaTaiLieu" + thuTuTaiLieu).val().length == 0) {
                        hideThis = true;
                    }
                }
                
                if (hideThis && !$(this).hasClass("hiddenObject")) {
                    $("#MaTaiLieu" + thuTuHienTai).val('');
                    $("#TenTaiLieu" + thuTuHienTai).html('');
                    $("#XoaTaiLieu" + thuTuHienTai).addClass("hiddenObject");
                    $(this).addClass("hiddenObject");
                }
            }
        });
    }
</script>
